<template>
  <div class="container">
    <!-- 内容切换 -->
    <div v-show="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
    <div class="card" v-for="item in list">
      <div style="height: 10px"></div>
      <div class="items">
        <div style="font-size: 16.5px;font-weight: 600;">工艺类型：{{ item.processType }}</div>
      </div>
      <div style="height: 10px"></div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 95%;">
        <div class="looked" @click="dels(item)">删除</div>
        <div class="looked" @click="editTitle(item)">编辑名称</div>
        <div class="looked" @click="lookDetail(item.id)">查看内容</div>
      </div>
      <div style="height: 10px"></div>
    </div>
    <div style="height: 10px"></div>
    <div class="add" @click="addTitle">新增类型</div>
    <!--  -->
    <u-overlay :show="shows" @click="shows = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <div style="text-align: center;font-size: 18px;font-weight: bold;">{{ title }}工艺类型</div>
          <div style="height: 30px;"></div>
          <div style="display: flex;align-items: center;">
            <div style="width: 2%;"></div>
            <div>工艺类型:</div>
            <input v-model="processType" placeholder="请输入工艺类型" type="text">
          </div>
          <div style="height: 40px;"></div>
          <div class="add" @click="submit">确认</div>
        </view>
      </view>
    </u-overlay>
  </div>
</template>
<script>
import { processList, processAdd, processEdit, processDel } from '../api/api.js'
export default {
  data() {
    return {
      list: [],
      shows: false,
      title: '',
      processType: '',
      id: ''
    };
  },
  methods: {
    addTitle() {
      this.title = '新增';
      this.shows = true;
    },
    editTitle(i) {
      this.processType = i.processType;
      this.id = i.id;
      this.shows = true;
      this.title = '编辑';
    },
    funList() {
      processList().then((res) => {
        console.log(res.data, "123");
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    },
    submit() {
      if (this.processType == '') {
        unixuni.showToast({
          title: '请输入完整',
          duration: 2000,
          icon: 'none'
        });
      } else {
        if (this.id == '') {
          // add
          processAdd({ processType: this.processType }).then(res => {
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                duration: 2000
              });
              this.shows = false;
              this.processType = '';
              this.funList();
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: 'none'
              });
            }
          })
        } else {
          // edit
          processEdit({ processType: this.processType, id: this.id }).then(res => {
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                duration: 2000
              });
              this.shows = false;
              this.id = '';
              this.processType = '';
              this.funList();
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: 'none'
              });
            }
          })
        }
      }
    },
    dels(i) {
      let t = this;
      uni.showModal({
        title: '提示',
        content: '是否删除当前工艺类型',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            processDel({ ids: [i.id] }).then(res => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000
                });
                t.funList();
              } else {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000,
                  icon: 'none'
                });
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    lookDetail(i){
      uni.setStorageSync('processId',i);
      uni.navigateTo({
         url: `/pagesExpert/index/newDemand`
      });
    }
  },

  onLoad() { },
  onShow() {
    this.funList();
  },
};
</script>
<style lang="scss">
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 90vw;
  height: 25vh;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 0;
  overflow-y: scroll;
}

.add {
  width: 95%;
  margin-left: 2.5%;
  background: #43a064;
  color: #fff;
  border-radius: 5px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #e3ede2;
  color: #1a512c;
  overflow-y: scroll;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #f4fbf3;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.looked {
  padding: 5px;
  background: #43a064;
  color: #fff;
  width: 30%;
  margin-left: 5%;
  height: 40rpx;
  font-size: 13px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>